React Server Actions: Palvelinpuolen lomakkeiden käsittely yksinkertaistettuna

React Server Actions, jotka esiteltiin React 18:ssa ja joita on parannettu merkittävästi Next.js:ssä, tarjoavat vallankumouksellisen lähestymistavan lomakkeiden lähetysten ja tietojen muokkausten käsittelyyn suoraan palvelimella. Tämä tehokas ominaisuus yksinkertaistaa kehitysprosessia, parantaa tietoturvaa ja parantaa suorituskykyä perinteiseen asiakaspuolen tietojen hakuun ja käsittelyyn verrattuna.

Mitä React Server Actions ovat?

Server Actions ovat asynkronisia funktioita, jotka suoritetaan palvelimella ja jotka voidaan kutsua suoraan React-komponenteista. Niiden avulla voit suorittaa palvelinpuolen tehtäviä, kuten:

• Lomakkeiden lähetykset: Käsittele lomaketiedot turvallisesti palvelimella.
• Tietojen muokkaukset: Päivitä tietokantoja tai ulkoisia API:ita.
• Todennus: Käsittele käyttäjien kirjautumisia ja rekisteröintejä.
• Palvelinpuolen logiikka: Suorita monimutkaista liiketoimintalogiikkaa paljastamatta sitä asiakkaalle.

Server Actionsin suurin etu on, että ne mahdollistavat palvelinpuolen koodin kirjoittamisen React-komponentteihisi, jolloin erillisiä API-reittejä ja monimutkaista asiakaspuolen tietojen haku -logiikkaa ei tarvita. Tämä käyttöliittymän ja palvelinpuolen logiikan sijoittaminen samaan paikkaan johtaa helpommin ylläpidettävään ja tehokkaampaan koodikantaan.

React Server Actionsin käytön hyödyt

React Server Actionsin käyttö tarjoaa useita merkittäviä etuja:

Yksinkertaistettu kehitys

Server Actions vähentävät boilerplate-koodia mahdollistamalla lomakkeiden lähetysten ja tietojen muokkausten käsittelyn suoraan React-komponenteissasi. Tämä poistaa erillisten API-päätepisteiden ja monimutkaisen asiakaspuolen tietojen haku -logiikan tarpeen, virtaviivaistaa kehitysprosessia ja tekee koodistasi helpommin ymmärrettävän ja ylläpidettävän. Ajattele yksinkertaista yhteydenottolomaketta. Ilman Server Actions -toimintoja tarvitsisit erillisen API-reitin lomakkeen lähettämisen käsittelyyn, asiakaspuolen JavaScriptin tietojen lähettämiseen ja virheiden käsittelylogiikan sekä asiakkaalla että palvelimella. Server Actions -toimintojen avulla kaikki tämä voidaan hoitaa itse komponentissa.

Parannettu tietoturva

Suorittamalla koodin palvelimella Server Actions vähentävät sovelluksesi hyökkäyspintaa. Arkaluonteiset tiedot ja liiketoimintalogiikka pidetään poissa asiakkaalta estäen haitallisten käyttäjien pääsyn niihin. Esimerkiksi tietokantatunnistetiedot tai API-avaimet eivät koskaan paljastu asiakaspuolen koodissa. Kaikki tietokantayhteydet tapahtuvat palvelimella, mikä vähentää SQL-injektoinnin tai luvattoman tietojen käytön riskiä.

Parempi suorituskyky

Server Actions voivat parantaa suorituskykyä vähentämällä asiakkaalle ladattavan ja suoritettavan JavaScriptin määrää. Tämä on erityisen hyödyllistä käyttäjille, joilla on vähän virtaa kuluttavat laitteet tai hitaat Internet-yhteydet. Tietojen käsittely tapahtuu palvelimella, ja vain tarvittavat käyttöliittymäpäivitykset lähetetään asiakkaalle, mikä johtaa nopeampaan sivujen lataukseen ja sujuvampaan käyttökokemukseen.

Optimistiset päivitykset

Server Actions integroivat saumattomasti Reactin Suspense- ja Transitions-ominaisuuksien kanssa mahdollistaen optimistiset päivitykset. Optimistiset päivitykset antavat sinun päivittää käyttöliittymän välittömästi, jopa ennen kuin palvelin on vahvistanut toiminnon. Tämä tarjoaa reagoivamman ja mukaansatempaavamman käyttökokemuksen, koska käyttäjien ei tarvitse odottaa palvelimen vastausta ennen kuin he näkevät toimintojensa tulokset. Verkkokaupassa tuotteen lisääminen ostoskoriin voidaan näyttää välittömästi, kun taas palvelin vahvistaa lisäyksen taustalla.

Progressiivinen parannus

Server Actions tukevat progressiivista parannusta, mikä tarkoittaa, että sovelluksesi voi silti toimia, vaikka JavaScript olisi poistettu käytöstä tai ei latautuisi. Kun JavaScript on poistettu käytöstä, lomakkeet lähetetään perinteisinä HTML-lomakkeina, ja palvelin hoitaa lähetyksen ja ohjaa käyttäjän uudelle sivulle. Tämä varmistaa, että sovelluksesi on kaikkien käyttäjien käytettävissä riippumatta heidän selaimen asetuksista tai verkkoyhteyden olosuhteista. Tämä on erityisen tärkeää saavutettavuuden ja SEO:n kannalta.

React Server Actionsin käyttö

Käyttääksesi React Server Actions -toimintoja sinun on käytettävä niitä tukevaa kehystä, kuten Next.js. Tässä on vaiheittainen opas:

1. Määritä Server Action

Luo asynkroninen funktio, joka suoritetaan palvelimella. Tämän funktion tulee käsitellä logiikkaa, jonka haluat suorittaa palvelimella, kuten tietokannan päivittäminen tai API:n kutsuminen. Merkitse funktio `'use server'` -direktiivillä yläosassa osoittamaan, että se on Server Action. Tämä direktiivi kertoo React-kääntäjälle, että funktiota käsitellään palvelinpuolen funktiona ja että se hoitaa automaattisesti tietojen sarjoittamisen ja deserialoinnin asiakkaan ja palvelimen välillä.

            // app/actions.js
'use server'

import { revalidatePath } from 'next/cache';
import { saveMessage } from './db';

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    await saveMessage(message);
    revalidatePath('/'); // Tyhjennä reitin välimuisti
    return { message: 'Viesti tallennettu onnistuneesti!' };
  } catch (e) {
    return { message: 'Viestin tallennus epäonnistui' };
  }
}

            

              
                Copy
              
            
          

Selitys:

• `'use server'` -direktiivi merkitsee tämän funktion Server Actioniksi.
• `revalidatePath('/')` tyhjentää reitin välimuistin varmistaen, että päivitetty data haetaan seuraavassa pyynnössä. Tämä on erittäin tärkeää tietojen johdonmukaisuuden ylläpitämiseksi.
• `saveMessage(message)` on paikkamerkki varsinaiselle tietokantayhteyslogiikallesi. Se olettaa, että sinulla on määritelty `saveMessage`-funktio jossain muualla viestin tallentamista tietokantaasi varten.
• Funktio palauttaa tilan objektin, jota voidaan käyttää palautteen näyttämiseen käyttäjälle.

2. Tuo ja käytä Server Action -toimintoa komponentissasi

Tuo Server Action React-komponenttiisi ja käytä sitä `action`-ominaisuutena lomake-elementissä. `useFormState`-koukkua voidaan käyttää lomakkeen tilan hallintaan ja palautteen näyttämiseen käyttäjälle.

            // app/page.jsx
'use client';

import { useFormState } from 'react-dom';
import { createMessage } from './actions';

export default function Home() {
  const [state, formAction] = useFormState(createMessage, {message: ''});

  return (
    

      Viesti:
      
      Lähetä
      {state?.message && 
{state.message}
}
    
  );
}

            

              
                Copy
              
            
          

Selitys:

• `'use client'` -direktiivi määrittää, että tämä on Client Component (koska se käyttää `useFormState`).
• `useFormState(createMessage, {message: ''})` alustaa lomakkeen tilan `createMessage`-Server Action -toiminnolla. Toinen argumentti on alkuperäinen tila.
• `form`-elementin `action`-ominaisuus on asetettu `formAction` -toiminnoksi, jonka `useFormState` palauttaa.
• `state`-muuttuja sisältää Server Actionin paluuarvon, jota voidaan käyttää palautteen näyttämiseen käyttäjälle.

3. Käsittele lomaketiedot

Server Actionin sisällä voit käyttää lomaketietoja käyttämällä `FormData`-API:ta. Tämä API tarjoaa kätevän tavan käyttää lomakekenttien arvoja.

            'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  // ...
}

            

              
                Copy
              
            
          

4. Käsittele virheet

Käytä `try...catch`-lohkoja käsitelläksesi virheitä, joita voi tapahtua Server Actionin suorituksen aikana. Palauta virheviesti tilaobjektissa näyttääksesi sen käyttäjälle.

            'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    // ...
  } catch (e) {
    return { message: 'Viestin tallennus epäonnistui' };
  }
}

            

              
                Copy
              
            
          

5. Validoi tiedot uudelleen

Kun Server Action on onnistuneesti muokannut tietoja, sinun on ehkä validoitava tietovälimuisti uudelleen varmistaaksesi, että käyttöliittymä heijastaa viimeisimpiä muutoksia. Käytä `revalidatePath`- tai `revalidateTag`-funktioita `next/cache` -kirjastosta tiettyjen polkujen tai tunnisteiden validoimiseksi uudelleen.

            'use server'

import { revalidatePath } from 'next/cache';

export async function createMessage(prevState, formData) {
  // ...
  revalidatePath('/'); // Tyhjennä reitin välimuisti
  // ...
}

            

              
                Copy
              
            
          

Edistynyt käyttö

Tietojen muokkaus

Server Actions sopivat erityisesti tietojen muokkaamiseen, kuten tietokantojen tai ulkoisten API:iden päivittämiseen. Voit käyttää Server Actions -toimintoja käsittelemään monimutkaisia tietojen muokkauksia, jotka vaativat palvelinpuolen logiikkaa, kuten tietojen validointia, laskelmien suorittamista tai vuorovaikutusta useiden tietolähteiden kanssa. Harkitse skenaariota, jossa sinun on päivitettävä käyttäjän profiili ja lähetettävä vahvistussähköposti. Server Action voi hoitaa sekä tietokannan päivityksen että sähköpostin lähettämisprosessin yhdellä, atomisella toiminnolla.

Todennus ja valtuutus

Server Actions -toimintoja voidaan käyttää todennuksen ja valtuutuksen käsittelyyn. Suorittamalla todennuksen ja valtuutuksen tarkistukset palvelimella voit varmistaa, että vain valtuutetuilla käyttäjillä on pääsy arkaluonteisiin tietoihin ja toimintoihin. Voit käyttää Server Actions -toimintoja käyttäjien kirjautumisten, rekisteröintien ja salasanan palautusten käsittelyyn. Esimerkiksi Server Action voi tarkistaa käyttäjätunnistetiedot tietokantaan nähden ja palauttaa tokenin, jota voidaan käyttää seuraavien pyyntöjen todentamiseen.

Reunafunktiot

Server Actions voidaan ottaa käyttöön Edge Functions -toimintoina, jotka suoritetaan palvelimien globaalissa verkossa lähellä käyttäjiäsi. Tämä voi merkittävästi vähentää latenssia ja parantaa suorituskykyä, erityisesti käyttäjille, jotka sijaitsevat maantieteellisesti hajallaan. Edge Functions ovat ihanteellisia Server Actions -toimintojen käsittelyyn, jotka vaativat alhaista latenssia, kuten reaaliaikaiset tietopäivitykset tai henkilökohtaisen sisällön toimitus. Next.js tarjoaa sisäänrakennetun tuen Server Actions -toimintojen käyttöönotolle Edge Functions -toimintoina.

Suoratoisto

Server Actions tukevat suoratoistoa, jonka avulla voit lähettää tietoja asiakkaalle paloina sen tullessa saataville. Tämä voi parantaa sovelluksesi havaittua suorituskykyä, erityisesti Server Actions -toiminnoille, joiden suorittaminen vie kauan aikaa. Suoratoisto on erityisen hyödyllinen suurten tietojoukkojen tai monimutkaisten laskelmien käsittelyssä. Voit esimerkiksi suoratoistaa hakutulokset asiakkaalle, kun ne haetaan tietokannasta, mikä tarjoaa reagoivamman käyttökokemuksen.

Parhaat käytännöt

Tässä on joitain parhaita käytäntöjä, joita kannattaa noudattaa React Server Actions -toimintoja käytettäessä:

• Pidä Server Actions pieninä ja keskittyneinä: Jokaisen Server Actionin tulee suorittaa yksi, hyvin määritelty tehtävä. Tämä tekee koodistasi helpommin ymmärrettävän, testattavan ja ylläpidettävän.
• Käytä kuvaavia nimiä: Valitse nimet, jotka osoittavat selkeästi Server Actionin tarkoituksen. Esimerkiksi `createComment` tai `updateUserProfile` ovat parempia kuin yleisnimet, kuten `processData`.
• Vahvista tiedot palvelimella: Vahvista tiedot aina palvelimella estääksesi haitallisia käyttäjiä syöttämästä virheellisiä tietoja sovellukseesi. Tämä sisältää tietotyyppien, muotojen ja alueiden validoinnin.
• Käsittele virheet asianmukaisesti: Käytä `try...catch`-lohkoja virheiden käsittelyyn ja anna käyttäjälle informatiivisia virheilmoituksia. Vältä arkaluonteisten virhetietojen paljastamista asiakkaalle.
• Käytä optimistisia päivityksiä: Tarjoa reagoivampi käyttökokemus päivittämällä käyttöliittymä välittömästi, jopa ennen kuin palvelin on vahvistanut toiminnon.
• Validoi tiedot tarvittaessa uudelleen: Varmista, että käyttöliittymä heijastaa viimeisimpiä muutoksia validoimalla tietovälimuisti uudelleen sen jälkeen, kun Server Action on muokannut tietoja.

Todellisen maailman esimerkkejä

Tarkastellaan joitain todellisen maailman esimerkkejä siitä, miten React Server Actions -toimintoja voidaan käyttää erityyppisissä sovelluksissa:

Verkkokauppasovellus

• Tuotteen lisääminen ostoskoriin: Server Action voi käsitellä tuotteen lisäämisen käyttäjän ostoskoriin ja ostoskorin kokonaissumman päivittämisen tietokannassa. Optimistisia päivityksiä voidaan käyttää näyttämään tuote välittömästi ostoskorissa.
• Maksun käsittely: Server Action voi käsitellä maksun kolmannen osapuolen maksuyhdyskäytävän avulla. Server Action voi myös päivittää tilauksen tilan tietokannassa ja lähettää vahvistussähköpostin käyttäjälle.
• Tuotearvostelun lähettäminen: Server Action voi käsitellä tuotearvostelun lähettämisen ja sen tallentamisen tietokantaan. Server Action voi myös laskea tuotteen keskimääräisen luokituksen ja päivittää tuotetietosivun.

Sosiaalisen median sovellus

• Uuden twiitin julkaiseminen: Server Action voi käsitellä uuden twiitin julkaisemisen ja sen tallentamisen tietokantaan. Server Action voi myös päivittää käyttäjän aikajanan ja ilmoittaa hänen seuraajilleen.
• Tykkääminen julkaisusta: Server Action voi käsitellä julkaisusta tykkäämisen ja tykkäysten määrän päivittämisen tietokannassa. Optimistisia päivityksiä voidaan käyttää päivitetyn tykkäysten määrän näyttämiseen välittömästi.
• Käyttäjän seuraaminen: Server Action voi käsitellä käyttäjän seuraamisen ja seuraajien ja seurattavien määrien päivittämisen tietokannassa.

Sisällönhallintajärjestelmä (CMS)

• Uuden blogikirjoituksen luominen: Server Action voi käsitellä uuden blogikirjoituksen luomisen ja sen tallentamisen tietokantaan. Server Action voi myös luoda slugin julkaisulle ja päivittää sivustokartan.
• Sivun päivittäminen: Server Action voi käsitellä sivun päivittämisen ja sen tallentamisen tietokantaan. Server Action voi myös validoida sivun välimuistin uudelleen varmistaakseen, että päivitetty sisältö näytetään käyttäjille.
• Muutoksen julkaiseminen: Server Action voi käsitellä muutoksen julkaisemisen tietokantaan ja ilmoittaa kaikille tilaajille.

Kansainvälistämiseen liittyvät näkökohdat

Kehitettäessä sovelluksia globaalille yleisölle on välttämätöntä ottaa huomioon kansainvälistäminen (i18n) ja lokalisointi (l10n). Tässä on joitain huomioitavia asioita React Server Actions -toimintoja käytettäessä kansainvälistetyissä sovelluksissa:

• Eri päivämäärä- ja aikamuotojen käsittely: Käytä `Intl`-API:ta päivämäärien ja aikojen muotoiluun käyttäjän aluekohtaisten asetusten mukaisesti.
• Eri numeromuotojen käsittely: Käytä `Intl`-API:ta numeroiden muotoiluun käyttäjän aluekohtaisten asetusten mukaisesti.
• Eri valuuttojen käsittely: Käytä `Intl`-API:ta valuuttojen muotoiluun käyttäjän aluekohtaisten asetusten mukaisesti.
• Virheviestien kääntäminen: Käännä virheviestit käyttäjän kielelle.
• Oikealta vasemmalle (RTL) -kielten tukeminen: Varmista, että sovelluksesi tukee RTL-kieliä, kuten arabiaa ja hepreaa.

Esimerkiksi lomaketta käsiteltäessä, joka vaatii päivämääräsyötteen, Server Action voi käyttää `Intl.DateTimeFormat`-API:ta päivämäärän jäsentämiseen käyttäjän alueen mukaan varmistaen, että päivämäärä tulkitaan oikein riippumatta käyttäjän aluekohtaisista asetuksista.

Johtopäätös

React Server Actions ovat tehokas työkalu palvelinpuolen lomakkeiden käsittelyn ja tietojen muokkausten yksinkertaistamiseen React-sovelluksissa. Mahdollistamalla palvelinpuolen koodin kirjoittamisen suoraan React-komponentteihisi, Server Actions vähentävät boilerplate-koodia, parantavat tietoturvaa, parantavat suorituskykyä ja mahdollistavat optimistiset päivitykset. Noudattamalla tässä oppaassa esitettyjä parhaita käytäntöjä voit hyödyntää Server Actions -toimintoja rakentaaksesi vankempia, skaalautuvampia ja ylläpidettävämpiä React-sovelluksia. Reactin jatkuvasti kehittyessä Server Actions -toiminnoilla on epäilemättä yhä tärkeämpi rooli web-kehityksen tulevaisuudessa.